<template>
  <div class="chart-control-tree">
    <FirstItem :name="firstData"></FirstItem>
    <div class="u-sub-items">
      <div
        class="u-sub-item"
        v-for="(item, index) in subData"
        :style="{ marginLeft: 30 * index + 'px' }"
      >
        <SubItem
          :percent="item.percent"
          :name="item.company"
          :isLast="index + 1 === subData.length"
        ></SubItem>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import FirstItem from './firstItem.vue'
import SubItem from './subItem.vue'

const props = defineProps({
  data: Array,
})

const firstData = computed(() => props?.data?.[0]?.value)

const subData = computed(() => {
  const arr = props?.data?.slice(1)
  const res = []
  for (let i = 0; i < arr.length; i = i + 2) {
    res.push({
      percent: arr[i].value,
      company: arr[i + 1].value,
    })
  }
  return res
})
</script>

<style lang="stylus" scoped>
.chart-control-tree
  display flex
  align-items flex-start
  white-space nowrap
  .u-sub-items
    margin-top 37px
  .u-sub-item
    margin-top -26px
</style>
